import React, { memo, useState, useEffect, useCallback } from 'react';
import { Modal, Button, Select } from 'antd';

import DataCard from './components/dataCard';
import EditAddModal from './components/editAddModal';
import styles from './index.less';

import {
  SpecialBlockListProps,
  SpecialData,
  SpecialModalType,
} from '@/pages/features/userPermission/user/add/types/interface';
import { filterAssignArr } from '@/utils/tools';

// [
//   {
//     id: 1,
//     labelValues: [
//       { id: 1, value: '1', name: '可选1', selected: false },
//       { id: 2, value: '2', name: '可选2', selected: false },
//     ],
//     name: '旅客VIP',
//     selected: false,
//     type: 1,
//   },
//   xxx
// ];

const SpecialBlockList: React.FC<SpecialBlockListProps> = (props) => {
  const {
    dataSource,
    pageType = 'add',
    formDisabled,
    removeHandleCallback,
    addEditSpecialDataHandle,
  } = props;
  console.log(dataSource);
  const [modalMsg, setmodalMsg] = useState({
    visible: false,
    title: '特殊数据授权',
    type: 'add',
    dataSource: null,
    selectedIds: [],
  });
  useEffect(() => {
    // formatDataSource();
  }, []);
  const formatDataSource = () => {
    let data = [];
    for (const item of dataSource) {
      // if(pageType == 'edit')
      if (item.selected) {
        data.push(item);
      }
    }
    console.log(data);
  };
  const removeHandle = (key, data) => {
    removeHandleCallback(key, data);
  };
  const addHandle = () => {
    console.log(dataSource);
    let selectedIds = dataSource
      .filter((item) => item.selected)
      .map((item) => item.id);
    console.log(selectedIds);
    setmodalMsg({
      ...modalMsg,
      type: 'add',
      visible: true,
      dataSource,
      selectedIds,
    });
  };
  const editHandle = (data) => {
    setmodalMsg({
      ...modalMsg,
      type: 'edit',
      visible: true,
      dataSource: data,
    });
  };
  const addEditHandle = (type, data) => {
    console.log(data);
    let lastData = JSON.parse(JSON.stringify(dataSource));
    const { selectVal1, selectVal2, selectedData1, selectedData2 } = data;
    console.log(type, data, dataSource);
    for (const item of lastData) {
      if(item.id === selectVal1){
        item.selected = true;
        for (const item2 of item.labelValues) {
          if(selectVal2.includes(item2.id)){
            item2.selected = true;
          }else {
            item2.selected = false;
          }
        }
      }else {
        item.selected = false;
      }
    }
    console.log(lastData)
    addEditSpecialDataHandle(type, lastData);
    setmodalMsg({
      ...modalMsg,
      visible: false,
    });
  };

  return (
    <>
      {modalMsg.visible && (
        <EditAddModal
          visible={modalMsg.visible}
          title={modalMsg.title}
          type={modalMsg.type as SpecialModalType}
          dataSource={modalMsg.dataSource}
          handleOkCallback={addEditHandle}
          selectedIds={modalMsg.selectedIds}
          handleCancelCallback={() => {
            setmodalMsg({
              ...modalMsg,
              visible: false,
            });
          }}
        ></EditAddModal>
      )}
      <div className={styles.container}>
        {dataSource.map((item) => {
          if (item.selected) {
            return (
              <DataCard
                key={item.id}
                dataSource={item}
                formDisabled={formDisabled}
                removeHandleCallback={removeHandle}
                editHandle={editHandle}
              ></DataCard>
            );
          }
        })}
        <div className={styles.card}>
          <Button size="small" disabled={formDisabled} onClick={addHandle}>
            添加
          </Button>
        </div>
      </div>
    </>
  );
};

export default memo(SpecialBlockList);
